<extend name="Common:base"/>
<block name="head">
  <style>
    .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    }
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    }
    .el-tabs__item{
        font-family: Microsoft YaHei;
        color:#0d0f10;
        font-size: 14px;
    }
    .el-form-item__content{
      font-size: 16px;
    }
    .el-dropdown-menu {
      overflow-y: auto;
      max-height: 400px;
    }
  </style>
</block>
<block name="body">
  <div id="app" class="container">
    <div class="wrapp" v-show="show" style="display:none;">
      <!-- <el-row>
        <el-alert
          title="除“部门”外，“个人”和“团组”暂时无法统计今天的!!!"
          type="warning"
          show-icon>
        </el-alert>
      </el-row> -->
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" ref="searchForm" :model="searchForm">
            <el-form-item prop="start">
                <el-date-picker size="small" v-model="searchForm.start" 
                  placeholder="请选择起日期" 
                  @change="startDateChange"
                  >
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="end">
                <el-date-picker 
                  v-model="searchForm.end" 
                  placeholder="请选择止日期" 
                  @change="endDateChange"
                  size="small"
                  >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="setField('lastWeek')">上周</el-button>
              <el-button size="small" @click="setField('lastMonth')">上月</el-button>
              <el-button size="small" @click="setField('week')">本周</el-button>
              <el-button size="small" @click="setField('month')">本月</el-button>
            </el-form-item>

            <el-form-item>
              <el-select size="small" style="width:120px;" v-model="searchForm.type" placeholder="查询类型" @change="allTypeChange">
                <el-option v-for="item in searchGroup" :label="item.key" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item prop="department_id">
              <el-tooltip content="选择某个部门后点击查询或者继续选择下属小组再查询" placement="bottom-start">
                <el-select size="small" style="width:120px;" clearable filterable   v-model="searchForm.department_id" @change="depChange" placeholder="请选择部门">
                  <el-option v-for="dep in deps" :value="dep.id" :label="dep.name"></el-option>
                </el-select>
              </el-tooltip>
            </el-form-item>

            <el-form-item prop="group_id">
              <el-tooltip content="必须先选择部门方可选择团组后点击查询或者继续选择下属队员再查询" placement="bottom-start">
                <el-select size="small" style="width:120px;" :disabled="ctrlSelect" clearable filterable  v-model="searchForm.group_id" @change="groupChange" placeholder="请选择小组">
                  <el-option v-for="group in groups" :value="group.id" :label="group.name"></el-option>
                </el-select>
              </el-tooltip>
            </el-form-item>

<!--             <el-form-item prop="user_id">
              <el-tooltip content="必须先选择团组方可选择其下属的员工再点击查询" placement="bottom-start">
                <el-select size="small" style="width:120px;" clearable  filterable  v-model="searchForm.user_id" @change="userChange" placeholder="请选择队员">
                  <el-option v-for="user in users" :value="user.id" :label="user.name"></el-option>
                </el-select>
              </el-tooltip>
            </el-form-item> -->

            <el-form-item>
              <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
                <el-button type="info" size="small" icon="search" @click="search2">查询</el-button>
              </el-tooltip> 
              <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
                <el-button size="small" @click="resetBack" style="margin-left:10px;">重置</el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip content="点击刷新当前页面" placement="right">
                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
              </el-tooltip>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table 
          :data="dataList" 
          border highlight-current-row
          v-loading="dataLoad" 
          element-loading-text="{:L('DATA_LOGIN')}"
          @sort-change="sortChange"
          @row-dblclick="getRowDetail">
                    <el-table-column label="序号"  align="center" width="65" :formatter="handleIndex"  >
                    </el-table-column>

                    <el-table-column  prop="name" header-align="center" label="名称" width="150">
                    </el-table-column>

                    <el-table-column v-if="searchForm.type=='group'" header-align="center" prop="realname" label="主管" width="150">
                    </el-table-column>

                    <el-table-column v-if="searchForm.type!='department'"  prop="department_name" 
                        header-align="center" label="部门"   width="150">
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="create_num" label="自锁数"  >
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="today_v" label="成交数"  >
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="conflict_to" label="冲突"  >
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="conflict_from" label="被冲突"  >
                    </el-table-column>

                    <el-table-column sortable="custom"  align="center" prop="pulls_num" label="索取"  >
                    </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row type="type" justify="start" align="middle" class="row-bg">
        <el-col :span="12">
              <div class="grid-content bg-purple-light pull-right">
                <!-- page -->
                <include file="Common:_pagination" />
                <!-- / page -->
              </div>
        </el-col>
      </el-row>
      <el-row>
        <el-table 
          :data="detailTable" v-show="ctrl"
          v-loading="detailLoad" 
          border highlight-current-row 
          element-loading-text="{:L('DATA_LOGIN')}"
          @sort-change="detailSortChange"
          >
                <el-table-column label="序号"  align="center" width="65" type="index"  >
                </el-table-column>
                <el-table-column   prop="name"  label="名称"   width="150">
                </el-table-column>

                <el-table-column sortable="custom"  align="center" prop="create_num" label="自锁数"  >
                </el-table-column>

                <el-table-column sortable="custom"  align="center" prop="today_v" label="成交数"  >
                </el-table-column>

                <el-table-column sortable="custom"  align="center" prop="conflict_to" label="冲突"  >
                </el-table-column>

                <el-table-column sortable="custom"  align="center" prop="conflict_from" label="被冲突"  >
                </el-table-column>

                <el-table-column sortable="custom"  align="center" prop="pulls_num" label="索取"  >
                </el-table-column>
          </el-table>
      </el-row>
    </div>
  </div>
</block>
<block name="scripts">

<script src="__PUBLIC__/js/calculate.js"></script>
<script>
  window.defaultOption.hooks.delAll('mounted');

  window.defaultOption.setDatas({
      ctrlSelect:false,
      ctrl:false,
      searchGroup:{:json_encode($searchGroup)},
      sortMap:{
        descending:'desc',
        ascending:'asc'
      },
      detailTable:[],
      detailParams:{},
      detailLoad:false,
      deps:[],
      groups:[],
      users:[],
      allTypeName:"选择统计类型",
      depName:"请选择部门",
      groupName:"请选择小组",
      userName:"请选择队员",
      oldDepValue:'',
      oldGroupValue:'',
      oldUserValue:''
  }).setForm('search',{
      start:"{$start}",
      end:"{$end}",
      type:"",
      department_id:"",
      group_id:"",
      user_id:"",
  }).setMethod('startDateChange', function(v){
      this.searchForm.start = v;
  }).setMethod('endDateChange', function(v){
      this.searchForm.end = v;
  }).setMethod('setField', function(v){

      if (v=='week') {
        this.searchForm.start = showWeekFirstDay();
        this.searchForm.end   = showWeekLastDay();

      } else if(v=='month'){
        this.searchForm.start = showMonthFirstDay();
        this.searchForm.end   = showMonthLastDay();
      } else if(v=='lastMonth'){
        this.searchForm.start = showLastMonthFirstDay();
        this.searchForm.end   = showLastMonthLastDay(); 
      } else if(v=='lastWeek'){
        this.searchForm.start = showLastWeekFirstDay();
        this.searchForm.end   = showLastWeekLastDay(); 
      }



      this.setTypeCtrl();
      this.dataLoad = true;
      this.loadDatalist();
      this.detailReset();
  }).setVueHook('mounted', function(){
    this.show = true;
    if (!this.readySearch()) {
      this.loadDatalist();
      // this.detailReset();
    }

    var vmThis = this;
    //部门
    this.$http.get("{:U('getDeps')}", {params:{status:1} }).then(function(response){
      var deps = [];
      response.body.forEach(function(currentValue,index){
        //console.log(currentValue);
        deps.push({id: currentValue.id, name: currentValue.name});
      })
      vmThis.$set(vmThis, 'deps', deps);
    });




  }).setMethod('search2', function(){
    if (this.readySearch()) {
      this.$message({
        message:"请选择止日期",
        type:"error",
        showClose: true
      })
    } else {

      this.setTypeCtrl();
      this.dataLoad = true;
      this.currentPage = 1;
      this.loadDatalist();
      this.detailReset();
    }
  }).setMethod('readySearch', function(){
      return this.searchForm.start.length ==0 || this.searchForm.end.length==0;
  }).setMethod('resetBack', function(){
      window.location.href="{:U('index')}";
  }).setMethod('sortChange', function(info){
      if (info) {
        this.searchForm.sort_field = info.prop;
        this.searchForm.sort_order = this.sortMap[info.order];
      } else {
        delete this.searchForm.sort_field;
        delete this.searchForm.sort_order;
      }
      this.dataReload();
      this.detailReset();
  }).setMethod('isLink', function(id){
    return id!=0 && this.objType!='Users';
  }).setMethod('getRowDetail', function(row, event){
      if (this.searchForm.type!='user') {

        var map = {
          'department':'Groups',
          'group':'Users'
        }

        this.detailParams['start'] = this.searchForm.start;
        this.detailParams['end']   = this.searchForm.end;
        this.detailParams['id']    = row.id;
        this.detailParams['objType']    = map[this.searchForm.type];
        if(this.searchForm.department_id != "" && this.searchForm.group_id == "" && this.searchForm.type == ""){
          this.detailParams['objType']    = map['department'];
        }else if(this.searchForm.group_id != "" && this.searchForm.type == ""){
          this.detailParams['objType']    = map['group'];
        }



        this.loadDetailTable();
      }
     
  }).setMethod('detailReset', function(){
    this.detailTable = [];
  }).setMethod('detailSortChange', function(info){
     if (info) {
        this.detailParams.sort_field = info.prop;
        this.detailParams.sort_order = this.sortMap[info.order];
      } else {
        delete this.detailParams.sort_field;
        delete this.detailParams.sort_order;
      }

      this.loadDetailTable();
  }).setMethod('loadDetailTable', function(){
      this.detailLoad = true;
      this.$http.get("{:U('SortCustomersCount/getList')}", {params:this.detailParams}).then(function(response){
        this.detailTable = response.body.list;
        this.detailLoad = false;
        if (this.detailTable.length==0) {
          this.$message("没有数据");
        }
      }, function(response){
        this.detailLoad = false;
        this.$message.error("出错了，请联系开发");
      })
  }).setMethod('depChange',function(v){
    if(v != this.oldDepValue){
      this.searchForm.group_id = "";
      this.searchForm.user_id = ""; 
    }
    this.searchForm.department_id = v;
    var vmThis = this;
    //小组
    this.$http.get("{:U('getGroups')}", {params:{department_id:v} }).then(function(response){
      var groups = [];
      response.body.forEach(function(currentValue,index){
        groups.push({id: currentValue.id, name: currentValue.name});
      })
      vmThis.$set(vmThis, 'groups', groups);
    });
    this.oldDepValue = v;
  }).setMethod('groupChange',function(v){
    if(v != this.oldGroupValue){
      this.searchForm.user_id = ""; 
    }
    this.searchForm.group_id = v;
    var d = this.searchForm.department_id;
    var vmThis = this;
    //员工
    this.$http.get("{:U('getUsers')}", {params:{group_id:v,department_id:d} }).then(function(response){
      var users = [];
      response.body.forEach(function(currentValue,index){
        users.push({id: currentValue.id, name: currentValue.realname});
      })
      vmThis.$set(vmThis, 'users', users);
    });
    this.oldGroupValue = v;
  }).setMethod('userChange',function(v){
    this.searchForm.user_id = v;
  }).setMethod('allTypeChange',function(v){
     this.ctrlSelect = v=="department" ? true : false;
  }).setMethod('setDropdownName',function(arr,v,name){
    for(var i = 0; i < this[arr].length; i++){
      if(this[arr][i]['id'] == v){
        this[name] = this[arr][i]['name'];
      }
    }
  }).setMethod('setTypeCtrl',function(){

    if(this.searchForm.user_id == ""){
      this.ctrl = true;
    }

    if(this.searchForm.type == "user"){
      this.ctrl = false;
    }

  });










  function titleCase(str) {
    var array = str.toLowerCase().split(" ");
    for (var i = 0; i < array.length; i++){
      array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
    }
    var string = array.join(" ");
    return string;
  }


</script>
</block>